import { Component, OnInit } from '@angular/core';
import { fadeIn } from "../../animations/fadeIn.animation";

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.scss'],
  animations: [fadeIn]
})
export class BarChartComponent implements OnInit {

  constructor() { }

  public chartOptions: any;

  ngOnInit() {

    this.chartOptions = {
      /* 标题 */
      title: {
        text: '能耗统计',
        left: 'center'  // 居中
      },
      /* 提示框 */
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          label: {
            backgroundColor: '#283b56'
          },
          z: -1
        }
      },

      /* 图例 */
      legend: {
        show: true,
        data: ['输出功率', '输入功率'],
        bottom: 5
      },

      /* 定义x轴*/
      xAxis: {
        type: 'category', // 类目轴
        boundaryGap: true, // 留白
        data: (function () {
          let now = new Date();
          let res = [];
          let len = 10; // 定义x轴分段数量
          while (len--) {
            //res.unshift(now.toLocaleTimeString().replace(/^\D*/,'')); // 输出12h制时分秒
            let currentMin = now.getMinutes();
            let minStr = currentMin >9 ? currentMin : '0' + currentMin;
            res.unshift(now.getHours() + ':' + minStr);
            now = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), now.getMinutes()-1, now.getSeconds());
          }
          return res;
        })()
      },

      /* 定义y轴 */
      yAxis: [{
        type: 'value',
        scale: true,
        name: '功率',
        max: 1000,
        min: 0,
        boundaryGap: [0.2, 0.2]
      }],

      /* 系列列表，通过type定义不同的图表类型 */
      series: [
        /* 条形图数据 */
        {
          name: '输出功率',
          type: 'bar',
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: '#4472C4'
            }
          },
          data: (function () {
            let res = [];
            let len = 10;
            while (len--) {
              res.push(Math.round(Math.random() * 1000));
            }
            return res;
          })()
        },

        /* 条形图数据 */
        {
          name: '输入功率',
          type: 'bar',
          barGap: '30%',
          barWidth: '20px',
          yAxisIndex: 0,
          itemStyle: {
            normal: {
              color: '#ED7D31'
            }
          },
          data: (function () {
            let res = [];
            let len = 10;
            while (len--) {
              res.push(Math.round(Math.random() * 1000));
            }
            return res;
          })()
        }

      ]
    };
  }

}
